<div class="container-fluid">
    <div class="row">
        <div class="col-md-12">
            <div class="input-group">
                <div class="input-group-prepend">
                    <div class="dropdown">
                        <button class="btn btn-warning dropdown-toggle" title="设置" data-toggle="dropdown">
                            配置 <i class="fa fa-cog"></i>
                        </button>
                        <div class="dropdown-menu">
                            <div class="form-group mx-2 mb-0" style="width:120px">
                                <input class="form-control mb-2" type="number" title="默认原图宽度，不填自适应" placeholder="宽">
                                <input class="form-control mb-2" type="number" title="默认原图高度，不填自适应" placeholder="高">
                                <input class="form-control mb-2" type="number" title="图片质量，0-1，默认 0.7" min="0.1" max="1" step="0.1" value="0.7" placeholder="质量">
                                <button class="btn btn-primary nrOptionsOk">确定</button>
                                <button class="btn btn-danger nrOptionsReset">重置</button>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="custom-file">
                    <input type="file" class="custom-file-input" multiple accept="image/*" id="txtFile">
                    <label class="custom-file-label" for="txtFile">选择图片 或 拖拽图片文件 或 Ctrl + V 粘贴图片（支持多选）</label>
                </div>
                <div class="input-group-prepend">
                    <a class="btn btn-dark" target="_blank" href="https://tiny.netnr.eu.org" title="更专业的图片压缩工具">Squoosh</a>
                </div>
            </div>
        </div>
        <div class="col-md-12 mt-3">
            <table class="table d-none nrTable">
                <tr>
                    <th>名称 <a href="javascript:void(0)" class="nrDownAll" download="images.zip">下载全部</a></th>
                    <th>大小</th>
                </tr>
            </table>
        </div>
        <div class="col-md-12 mt-5 pt-5 nrDragTip">
            <div class="h1 text-center text-secondary">支持拖拽图片</div>
        </div>
    </div>
</div>

@Html.Raw(Netnr.SharedApp.QuoteTo.Html("lrz.js,jszip.js"))

<script>

    var pg = {
        //压缩配置
        options: {
            width: null,
            height: null,
            quality: 0.7
        },

        init: function () {
            pg.zip = new JSZip();

            //接收文件
            ss.receiveFiles(function (files) {
                pg.addFiles(files);
            }, "#txtFile");

            //更新压缩配置
            $('.nrOptionsOk').click(function (e) {
                var txts = $(this).parent().find('input');

                pg.options = {
                    width: parseInt(txts.eq(0).val()),
                    height: parseInt(txts.eq(1).val()),
                    quality: parseFloat(txts.eq(2).val())
                };
                if (isNaN(pg.options.width) || pg.options.width <= 0) {
                    pg.options.width = null
                    txts.eq(0).val('')
                }
                if (isNaN(pg.options.height) || pg.options.height <= 0) {
                    pg.options.height = null
                    txts.eq(1).val('')
                }
                if (isNaN(pg.options.quality) || pg.options.quality < 0 || pg.options.quality > 1) {
                    pg.options.quality = 0.7
                    txts.eq(1).val(pg.options.quality);
                }
            });

            //重置压缩配置
            $('.nrOptionsReset').click(function (e) {
                if (e && e.stopPropagation) {
                    e.stopPropagation()
                } else {
                    window.event.cancelBubble = true
                }

                $(this).parent().find('input').each(function () {
                    this.value = this.defaultValue;
                });
                pg.options = {
                    width: null,
                    height: null,
                    quality: 0.7
                }
            });
        },

        //添加文件
        addFiles: function (files) {
            var ignorefile = [];
            for (var i = 0; i < files.length; i++) {
                var file = files[i];
                if (file.type.indexOf("image/") == 0) {
                    lrz(file, pg.options).then(function (rst) {

                        var size1 = ss.sizeOf(rst.origin.size);
                        var size2 = ss.sizeOf(rst.file.size);
                        var ratio = ((rst.origin.size - rst.file.size) / rst.origin.size * 100).toFixed(2) + "%";

                        var htm = [];
                        htm.push('<tr>');
                        htm.push('<td><img src="' + rst.base64 + '" style="max-height:20px;max-width:50px" /> <a href="javascript:void(0)" download="' + rst.origin.name + '" >' + rst.origin.name + '</a></td>');
                        htm.push('<td>-' + ratio + '（' + size1 + ' ➜ <span class="text-success">' + size2 + '</span>）</td>');
                        htm.push('</tr>');
                        var tr = $(htm.join(''));
                        tr.find('a').attr('href', URL.createObjectURL(rst.file));
                        $('.nrTable').append(tr);

                        pg.zip.file(pg.checkSafeName(rst.origin.name), rst.file, { base64: true });
                        pg.zip.generateAsync({ type: "blob" }).then(function (content) {
                            $('.nrDownAll').attr('href', URL.createObjectURL(content))
                        });
                    }).catch(err => {
                        console.log(err);
                    })
                } else {
                    ignorefile.push(file.name);
                }
            }
            if (ignorefile.length) {
                var ja = jz.alert('<textarea class="form-control text-nowrap min300">' + ignorefile.join('\r\n') + '</textarea>');
                ja.fn.title.innerHTML = '已忽略非图片文件';
            }
            $('#txtFile').val('');
            $('.nrDragTip').addClass('d-none');
            $('.nrTable').removeClass('d-none');
        },

        checkSafeName: function (filename) {
            var newfilename = filename, num = 1, index = filename.lastIndexOf("."),
                name = filename.substr(0, index), ext = filename.substr(index);
            while (newfilename in pg.zip.files) {
                newfilename = name + "(" + (num++) + ")" + ext;
            }
            return newfilename;
        }
    }

    pg.init();

</script>
